<template>
  <div class="app-container">
    <el-form ref="orderRef" :model="temp" :rules="rules" label-width="100px">
      <!--订单信息-->
      <el-card class="box-card" header="订单信息">
        <el-form-item label="课程名" prop="courseId">
          <el-select v-model.number="temp.courseId" :loading="courseLoading" filterable placeholder="请选择课程">
            <el-option
              v-for="item in courseList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="学员姓名" prop="studentName">
          <el-input v-model.trim="temp.studentName" class="order-input" placeholder="请输入学员姓名" />
        </el-form-item>
        <el-form-item label="学员手机号" prop="phone">
          <el-input v-model.number="temp.phone" class="order-input" placeholder="请输入学员手机号码" />
        </el-form-item>
      </el-card>

      <!--支付方式-->
      <el-card class="box-card" header="支付方式">
        <el-form-item label="支付方式" prop="payType">
          <el-row type="flex" align="middle">
            <el-radio v-model="temp.payType" :label="payTye.cash">现金支付</el-radio>
            <el-radio v-model="temp.payType" :label="payTye.alipay" class="f-ac">
              <el-image :src="require('@/assets/pay-type-images/alipay.png')" />
            </el-radio>
          </el-row>
        </el-form-item>
      </el-card>
    </el-form>
    <!--操作按钮-->
    <el-row type="flex" justify="end">
      <el-button @click="resetForm">重置</el-button>
      <el-button type="primary" @click="handleCreate">创建订单</el-button>
    </el-row>
    <!--跳转支付宝使用-->
    <div v-show="false" class="payform" />
  </div>
</template>

<script>
import { getList } from '@/api/course'
import { createOrder } from '@/api/order'

const formData = {
  courseId: undefined,
  studentName: '',
  courseName: '',
  phone: '',
  totalPrice: undefined,
  payType: 0 // 0 现金支付， 1 支付宝支付 2 待开发
}

// 支付方式代码
const payTye = {
  cash: 0,
  alipay: 1,
  wechat: 2,
  other: 3
}

export default {
  name: 'AddOrder',
  data() {
    return {
      // 表单数据
      temp: Object.assign({}, formData),
      // 表单规则
      rules: {
        courseId: [
          {
            required: true,
            message: '请选择课程',
            trigger: 'blur'
          }
        ],
        studentName: [
          {
            required: true,
            message: '请输入学员姓名',
            trigger: 'blur'
          }
        ],
        phone: [
          {
            required: true,
            message: '请输入手机号',
            trigger: 'blur'
          },
          {
            pattern: /^1(3[0-9]|4[5,7]|5[012356789]|6[2567]|7[0,178]|8[0-9]|9[189])\d{8}$/,
            message: '手机号码格式不正确',
            trigger: 'blur'
          }
        ],
        payType: [
          {
            required: true,
            message: '请选择支付方式'
          }
        ]
      },
      // 课程列表
      courseList: [],
      // 支付代码
      payTye,
      // 加载课程列表
      courseLoading: true
    }
  },
  created() {
    this.getCourseList()
  },
  methods: {
    // 获取课程列表
    getCourseList() {
      getList().then(res => {
        this.courseList = res.data
        this.courseLoading = false
      })
    },
    // 重置表单
    resetForm() {
      this.temp = Object.assign({}, formData)
      this.$refs.orderRef.clearValidate()
    },
    // 创建订单
    handleCreate() {
      this.$refs.orderRef.validate(vaild => {
        if (vaild) {
          // 校验通过
          const data = Object.assign({}, this.temp)
          data.payType = Number.parseInt(data.payType)
          // 存入课程名作为订单标题
          for (const i in this.courseList) {
            if (this.courseList[i].id === data.courseId) {
              data.courseName = this.courseList[i].name
              data.totalPrice = this.courseList[i].price
              break
            }
          }
          // 创建订单
          createOrder(data).then(res => {
            this.$notify.success({
              title: '成功',
              message: res.msg,
              duration: 2000
            })
            this.resetForm()
            // 现金支付,跳转订单详情页
            if (data.payType === payTye.cash) {
              this.$router.push('/order/info?code=' + res.data)
            } else if (data.payType === payTye.alipay) {
              // 支付宝支付
              document.querySelector('.payform').innerHTML = res.data
              this.$nextTick(() => {
                document.forms[1].submit()
              })
            }
          })
        }
      })
    }
  }
}
</script>

<!--suppress CssUnusedSymbol -->
<style scoped>
.el-card {
  margin: 20px 0;
}
.order-input {
  width: 205px;
}
.f-ac {
  display: flex;
  align-items: center;
}
.el-image {
  width: 120px;
}
</style>
